{include file="public/head"}

<body>
<section class="content">
    <header>
        <span><a href="javascript:history.go(-1)"><img src="__STATIC__/User/img/Return.png" alt=""></a></span>
        <p>理财</p>
        <span></span>
    </header>

    <div class="cunkuan">
        <div class="level">
            <p>理财金</p>
            <input class="dengji" type="text" value="{$UserInfo.deposit}$"  readonly>
            <p>可认购金额</p>
            <input class="dengji" type="text" value="{$UserInfo.balance_1}$"  readonly>
            <p>认购</p>
            <input class="dengji" id="num" type="text" placeholder="1$起购" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
            <p>周期</p>
            
            <div class="shouyi">
                <label for="choose4">
                    <input type="radio" name="cycle" id="choose4" value="4" checked>
                    <div class="shouyisj active">
                        <div class="left">
                            <h5>0.3%~0.5%</h5>
                            <p>日收益</p>
                        </div>
                        <div class="right">
                            <p>三年期</p>
                            <p><span>高收益</span></p>
                        </div>
                    </div>
                </label>

                <label for="choose3">
                    <input type="radio" name="cycle" id="choose3" value="3">
                    <div class="shouyisj">
                        <div class="left">
                            <h5>0.2%~0.4%</h5>
                            <p>日收益</p>
                        </div>
                        <div class="right">
                            <p>二年期</p>
                            <p><span>高收益</span></p>
                        </div>
                    </div>
                </label>

                <label for="choose2">
                    <input type="radio" name="cycle" id="choose2" value="2">
                    <div class="shouyisj">
                        <div class="left">
                            <h5>0.15%~0.35%</h5>
                            <p>日收益</p>
                        </div>
                        <div class="right">
                            <p>一年期</p>
                            <p><span>高收益</span></p>
                        </div>
                    </div>
                </label>

                <label for="choose1">
                    <input type="radio" name="cycle" id="choose1" value="1" >
                    <div class="shouyisj ">
                        <div class="left">
                            <h5>0.1%~0.3%</h5>
                            <p>日收益</p>
                        </div>
                        <div class="right">
                            <p>半年期</p>
                            <p><span>高收益</span></p>
                        </div>
                    </div>
                </label>
            </div>


            <style>
                .shouyisj{
                    width: 5.25rem;
                    margin: 0 auto;
                    display: flex;
                    justify-content: flex-start;
                    border: 1px solid #eaeaea;
                    padding: .2rem;
                }
                .shouyisj.active{
                    border-color: #953b39;
                }
                .cunkuan .shouyisj .left p,.cunkuan .shouyisj h5{
                    padding: 0;
                    line-height: 2;
                }
                .cunkuan .shouyisj h5{
                    color: #953b39;
                    font-size: .4rem;
                }
                .cunkuan .shouyisj .left p{
                    color: #953b39;
                    font-size: .2rem;
                }
                .cunkuan .shouyisj .right{
                    margin-left: .2rem;
                }
                .cunkuan .shouyisj .right span{
                    padding: .1rem .2rem;
                    border-radius: .08rem;
                    border: 1px solid #eaeaea;
                    margin-right: .2rem;
                }
                .cunkuan .shouyisj .right{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .cunkuan .shouyisj .right p{
                    line-height: 2;
                }
                .left{
                    width: 2rem;
                }
            </style>
            
<!--            <select id="cycle" class="dengji">-->
<!--                <option value="1">半年定存</option>-->
<!--                <option value="2">一年定存</option>-->
<!--                <option value="3">二年定存</option>-->
<!--                <option value="4">三年定存</option>-->
<!--            </select>-->
<!--            <p>手机验证码</p>-->
<!--            <div class="getCode">-->
<!--                <input type="text" id="code" placeholder="请输入验证码" class="dengji"><span id="send">获取验证码</span>-->
<!--            </div>-->
            <div style="display: flex;justify-content: center;align-items: center;width: 5.25rem;margin: 0 auto;">
                <input type="checkbox" id="surebtn">
                <label for="surebtn">
                    <p style="padding-left: .2rem">我已阅读<span id="read" style="color: red">《免责申明》</span></p>
                </label>
            </div>
            <div class="btn login_btn" id="sub" style="margin-top: .2rem;">确认买入</div>
        </div>

        <div class="level record">
            <ul class="top">
                <li>
                    <span>金额</span>
                    <span>时间</span>
                    <span>周期</span>
                    <span>操作</span>
                </li>
            </ul>
            <ul class="content" style="height: 3rem">
                {volist name="Deposit" id="v"}
                <li>
                    <span>{$v.num}</span>
                    <span>{$v.add_time|date="m/d H:i",###}</span>
                    <span>
                        {if condition="$v.cycle eq 1"}半年期
                        {elseif condition="$v.cycle eq 2"}一年期
                        {elseif condition="$v.cycle eq 3"}二年期
                        {elseif condition="$v.cycle eq 4"}三年期
                        {/if}
                    </span>
                    <span><a href="{:url('Finance/DepositReduce',['id'=>$v.id])}" style="background-color: #468fff;color: white;padding: .1rem .2rem;border-radius: .1rem">详 情</a></span>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
</section>

<div class="dialog hide">
    <div class="dialog_content">
        <h5>{$NoticeInfo.title}</h5>
        <div class="dialog_txt">
            {$NoticeInfo.content}
        </div>
        <div class="btn login_btn dialog_btn">确定</div>
    </div>
</div>

<style>
    .dialog{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .dialog_content{
        width: 80%;
        height: 8rem;
        background-color: #fff;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        padding: .2rem;
        box-sizing: border-box;
    }
    .dialog_content h5{
        line-height: .9rem;
        text-align: center;
        font-size: .28rem;
    }
    .dialog_txt{
        height: 4.5rem;
        overflow-y: scroll;
    }
    .hide{
        display: none!important;
    }
</style>

<script src="__STATIC__/User/js/jquery-2.1.1.min.js"></script>

<script>
    
    $(function () {
        $("input[type=radio]").on('change',function () {
            $('.shouyisj').removeClass('active')
            $(this).parent().find(".shouyisj").addClass('active')
            let val = $(this).attr('id')
        })

        var agree = "{$UserInfo.is_agree}";
        if(agree == 1){
            $(".dialog").addClass('hide');
        }else{
            $(".dialog_btn").on('click',function () {
                $.ajax({
                    type:"POST",
                    url:"{:url('Finance/Agree')}",
                    data:{},
                    dataType:"json",
                    success:function(data){
                        if(data.status == 1) {
                            $(".dialog").addClass('hide');
                        }
                    }
                });
            })
        }
    })

    $("#read").on('click',function () {
        $(".dialog").removeClass('hide')
    })

    $(".dialog_btn").on('click',function () {
        $(".dialog").addClass('hide')
    })
    
    var flag1 = true;
    //发送验证吗
    $("#send").on('click',function(){
        if(flag1) {
            flag1 = false
            var phone = "{$UserInfo.phone}";
            $.ajax({
                type:"POST",
                url:"{:url('Open/SendCode')}",
                data:{
                    phone:phone,
                },
                dataType:"json",
                success:function(data){
                    console.log(data)
                    if(data.status == 1){
                        alert(data.message);
                        var time = 60;
                        var interval = setInterval(function(){
                            time -= 1;
                            $("#send").text(`剩余时间${time}`);
                            if(time == 0){
                                clearInterval(interval)
                                $("#send").text('重新发送');
                                flag1 = true
                            }
                        },1000)
                    }else{
                        alert(data.message);
                    }
                }
            });
        }
    })

    //提交申请
    $("#sub").on('click',function(){
        var num = $("#num").val();
        var cycle = $('input:radio[name="cycle"]:checked').val();
        var code = $("#code").val();
        var surebtn = $("#surebtn").prop("checked")

        if(!surebtn){
            alert('请阅读《免责申明》');
            $(".dialog").removeClass('hide')
            return false;
        }

        if(num == ""){
            alert('请输入认购金额');
            return false;
        }else if(num < 1){
            alert('最低认购金额1$');
            return false;
        }

        if(code == ""){
            alert('请输入验证码');
            return false;
        }

        $.ajax({
            type:"POST",
            url:"{:url('Finance/DepositAdd')}",
            data:{
                num:num,
                cycle:cycle,
                code:code,
            },
            dataType: "json",
            success:function(data){
                if(data.status == 1){
                    alert(data.message);
                }else{
                    alert(data.message);
                }
            }
        })

    })

</script>
</body>
</html>